{extend name="public/public"} {block name='css'}
<style>
  .error-area {
    background-position: center center;
    background-size: cover;
    text-align: center;
    height: 540px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  @media only screen and (max-width: 767px) {
    .error-area {
      height: 300px;
    }
  }
  .error-area h1 {
    font-size: 40px;
    font-weight: 400;
    margin: 0 0 20px;
  }
</style>
{/block} {block name="content"}
<div
  class="error-area"
  style="background-image: url(/static/web/img/404-bg.png)"
>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-8">
        <h1>Error 404</h1>
        <a href="index.html" class="button">Back to home</a>
      </div>
    </div>
  </div>
</div>
{/block} {block name='js'}
<script>
  $(".nav-active-5").addClass("current-menu-item");
</script>
{/block}
